<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="css/flickity.css" media="screen">
<script src="/path/to/flickity.pkgd.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<!--link rel="stylesheet" type="text/css" href="css/default.css"-->
<link rel="stylesheet" href="css/flickity-docs.css" media="screen" />
<script src="js/flickity-docs.min.js"></script>
<script src="/path/to/imagesloaded.pkgd.js"></script>
<script>
  var flky = new Flickity( '.gallery', {
  // options, defaults listed
 
  accessibility: false,
  // enable keyboard navigation, pressing left & right keys
 
  autoPlay: false,
  // advances to the next cell
  // if true, default is 3 seconds
  // or set time between advances in milliseconds
  // i.e. `autoPlay: 1000` will advance every 1 second
 
  cellAlign: 'center',
  // alignment of cells, 'center', 'left', or 'right'
  // or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right)
 
  cellSelector: undefined,
  // specify selector for cell elements
 
  contain: false,
  // will contain cells to container
  // so no excess scroll at beginning or end
  // has no effect if wrapAround is enabled
 
  draggable: true,
  // enables dragging & flicking
 
  freeScroll: false,
  // enables content to be freely scrolled and flicked
  // without aligning cells
 
  friction: 0.2,
  // smaller number = easier to flick farther
 
  imagesLoaded: false,
  // if imagesLoaded is present, Flickity can re-position cells
  // once images are loaded
 
  initialIndex: 0,
  // zero-based index of the initial selected cell
 
  percentPosition: true,
  // sets positioning in percent values, rather than pixels
  // Enable if items have percent widths
  // Disable if items have pixel widths, like images
 
  prevNextButtons: true,
  // creates and enables buttons to click to previous & next cells
 
  pageDots: true,
  // create and enable page dots
 
  resizeBound: true,
  // listens to window resize events to adjust size & positions
 
  watchCSS: false,
  // watches the content of :after of the element
  // activates if #element:after { content: 'flickity' }
  // IE8 and Android 2.3 do not support watching :after
  // set watch: 'fallbackOn' to enable for these browsers
 
  wrapAround: false
  // at end of cells, wraps-around to first for infinite scrolling
 
});</script>
<title>本篇作品 - 太正浪漫資料館</title>
<style>
</style>
</head>

<body>
<script src="top.js"></script>
	<div class="fullBox">
            <div class='tabs tabs_active'>
              <ul class='horizontal'>
                <li><a href="#tab-1"><img src="asset/game/sakura taisen old logo.png"></a></li>
                <li><a href="#tab-2"><img src="asset/game/sakura taisen 2 logo.png"></a></li>
                <li><a href="#tab-3"><img src="asset/game/sakura taisen old logo.png"></a></li>
                <li><a href="#tab-4"><img src="asset/game/sakura taisen old logo.png"></a></li>
                <li><a href="#tab-5"><img src="asset/game/sakura taisen old logo.png"></a></li>
                <li><a href="#tab-6"><img src="asset/game/sakura taisen old logo.png"></a></li>
              </ul>
<div id='tab-1'>
	<div class="bigBox">
			<div class="ZI-slider">
			<div class="gallery js-flickity"
  data-flickity-options='{ "imagesLoaded": true, "prevNextButtons": false}'>
			<div>
			<img src="https://s2.ax1x.com/2019/12/18/Q78QOA.jpg" />
			<div class="img-info">「サクラ大戦」セガサターン通常版カバー</div>
			</div>
			<div>
			<img src="https://s2.ax1x.com/2019/12/18/Q7GZBn.jpg" />
			<div class="img-info">「サクラ大戦」セガ PC 版カバー</div>
			</div>
			</div>
			</div>
			<!-- Slider -->
			<div class="infoBox">
				<table>
					<tr>
						<td colspan="2" style="font-size: 16px; color: #432000;">
							文明開化より五十余年……。<br /><br />帝都・東京は、西洋文化と日本古来の文化が入り交じったモダンな街並みが軒を連ね、そこを走り抜ける蒸気鉄道、馬車、人力車、そして蒸気自動車、空には飛行機が飛び交い、町の地下には地下蒸気（地下鉄）の線路が張り巡らされているなど、高度な文明都市が築き上げられていた。<br />しかし、その反面、怪物や呪術が実在する幻想都市でもあった。 陸軍ではとても手に負えない特殊任務や人命救助、そして異形の化け物から帝都を守るべく結成されたのが、陸軍所属から独立した政府直属の対降魔（こうま）組織、帝国華撃団（ていこくかげきだん）「花組」、略称「帝撃」である。<br /><br />集められたメンバーは、昼は大帝国劇場のスターの顔を持つ若き少女たち。<br />独自の装備と特権を持つ「帝撃」は銀座に「花組」の本部があり、大帝国劇場の地下には司令部が設置されている。<br />その他浅草・花やしきにも支部があるという……。<br /><br />そんな「帝撃」に、一人の青年将校が転属してきたところから、この物語が始まる。
						</td>
					</tr>
					<tr>
						<td style="text-align: center;font-weight: bold; color: #432000;">ジャンル</td>
						<td style="text-align: center;; color: #432000;">ドラマチックアドベンチャー</td>
					</tr>
					<tr>
						<td style="text-align: center;font-weight: bold; color: #432000;">プレイ人数</td>
						<td style="text-align: center; color: #432000;">１Ｐ</td>
					</tr>
					<tr>
						<td rowspan="3" style="text-align: center;font-weight: bold; color: #432000;">発売日</td>
						<td style="text-align: center; color: #432000;">1996年9月27日（セガサターン）</td>
					</tr>
					<tr>
						<td style="text-align: center; color: #432000;">　2000年5月25日（ドリームキャスト）</td>
					</tr>
					<tr>
						<td style="text-align: center; color: #432000;">　2000年8月18日（PC）</td>
					</tr>
				</table>
			</div>
	</div><!-- My box for the slider -->
</div>
<div id='tab-2'>
	<div class="bigBox">
			<div class="ZI-slider">
			<div class="gallery js-flickity"
  data-flickity-options='{ "imagesLoaded": true, "prevNextButtons": false}'>
			<div>
			<img src="https://s2.ax1x.com/2019/12/18/Q7GBge.jpg" />
			<div class="img-info">「サクラ大戦2」セガサターン通常版カバー</div>
			</div>
			<div>
			<img src="https://s2.ax1x.com/2019/12/18/Q7G4gg.jpg" />
			<div class="img-info">「サクラ大戦2」セガサターン初回限定版カバー</div>
			</div>
			</div>
			</div>
			<div class="infoBox">
				<table>
					<tr>
						<td colspan="2" style="font-size: 16px; color: #432000;">
							太正十四年、春。<br /><br />先の「黒之巣会」事変による痛手も癒え、帝都は平和な日々を取り戻していた。<br />「帝国華撃団」の少女達は戦闘部隊の任を解かれ今は歌い踊る「歌劇団」として日々忙しさに追われながらも平和なひとときに青春を謳歌していた。<br /><br />だが、その平和を脅かし帝都に混乱と破壊の嵐を巻き起こそうと企てる者達がいる。<br />邪なる術を使い「魔」を操り人に害をなす・・・その名は「黒鬼会」。 彼らの目的は・・・そして正体は？<br /><br />帝都に再び悪の影が落ちようとしている時、敢然と悪に立ち向かう乙女達。<br />帝国華撃団・花組 ここに参上！<br /><br />─いま再び帝都の命運を賭けた戦いが幕を開こうとしている。
						</td>
					</tr>
					<tr>
						<td style="text-align: center;font-weight: bold; color: #432000;">ジャンル</td>
						<td style="text-align: center;; color: #432000;">ドラマチックアドベンチャー</td>
					</tr>
					<tr>
						<td style="text-align: center;font-weight: bold; color: #432000;">プレイ人数</td>
						<td style="text-align: center; color: #432000;">１Ｐ</td>
					</tr>
					<tr>
						<td rowspan="3" style="text-align: center;font-weight: bold; color: #432000;">発売日</td>
						<td style="text-align: center; color: #432000;">1998年4月4日（セガサターン）</td>
					</tr>
					<tr>
						<td style="text-align: center; color: #432000;"> 2002年2月7日（ドリームキャスト）</td>
					</tr>
					<tr>
						<td style="text-align: center; color: #432000;">　2007年1月25日（PC）</td>
					</tr>
				</table>
			</div>
	</div>
</div>
              <div id='tab-3'><span>樱战3</span></div>
              <div id='tab-4'><span>樱战4</span></div>
              <div id='tab-5'><span>樱战5</span></div>
              <div id='tab-6'><span>樱战高清重置</span></div>
            </div>
		<div class="bigBox">
			<div class="middleBox">
			</div>
		</div>
	</div>
	<script src="js/main.js"></script>	
	<script type="text/javascript">
		$(document).ready(function() {

			$('.tabs_default').tabslet();

			$('.tabs_active').tabslet({
				active: 2
			});

			$('.tabs_hover').tabslet({
				mouseevent: 'hover',
				attribute: 'href',
				animation: false
			});

			$('.tabs_animate').tabslet({
				mouseevent: 'click',
				attribute: 'href',
				animation: true
			});

			$('.tabs_rotate').tabslet({
				autorotate: true,
				delay: 3000
			});

			$('.tabs_controls').tabslet();

			$('.before_event').tabslet();
			$('.before_event').on("_before", function() {
				alert('This alert comes before the tab change!')
			});

			$('.after_event').tabslet({
				animation: true
			});
			$('.after_event').on("_after", function() {
				alert('This alert comes after the tab change!')
			});

		});
	</script>
</body>
</html>
